<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>字体图标3D按钮</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			font-family: 'Poppins', sans-serif;
		}

		html,
		body {
			display: grid;
			height: 100%;
			place-items: center;
			background: #000;
		}

		.icons {
			display: inline-flex;
		}

		.icons a {
			margin: 0 25px;
			text-decoration: none;
			color: #fff;
			display: block;
			position: relative;
		}

		.icons a .layer {
			width: 55px;
			height: 55px;
			transition: all 0.3s;
		}

		.icons a:hover .layer {
			transform: rotate(-35deg) skew(20deg);
		}

		.icons a .layer span {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			border: 1px solid #fff;
			border-radius: 5px;
			transition: all 0.3s
		}

		.icons a .layer span.fa {
			font-size: 30px;
			line-height: 55px;
			text-align: center;
		}

		.icons a:hover .layer span:nth-child(1) {
			opacity: 0.2;
		}

		.icons a:hover .layer span:nth-child(2) {
			opacity: 0.4;
			transform: translate(5px, -5px);
		}

		.icons a:hover .layer span:nth-child(3) {
			opacity: 0.6;
			transform: translate(10px, -10px);
		}

		.icons a:hover .layer span:nth-child(4) {
			opacity: 0.8;
			transform: translate(15px, -15px);
		}

		.icons a:hover .layer span:nth-child(5) {
			opacity: 1;
			transform: translate(20px, -20px);
		}

		.icons a:nth-child(1) .layer span,
		.icons a:nth-child(1) .text {
			color: #4267b2;
			border-color: #4267b2;
		}

		.icons a:nth-child(2) .layer span,
		.icons a:nth-child(2) .text {
			color: #1da1f2;
			border-color: #1da1f2;
		}

		.icons a:nth-child(3) .layer span,
		.icons a:nth-child(3) .text {
			color: #e1306c;
			border-color: #e1306c;
		}

		.icons a:nth-child(4) .layer span,
		.icons a:nth-child(4) .text {
			color: #2867b2;
			border-color: #2867b2;
		}

		.icons a:nth-child(5) .layer span,
		.icons a:nth-child(5) .text {
			color: #ff0000;
			border-color: #ff0000;
		}

		.icons a:nth-child(1) .layer span {
			box-shadow: -1px 1px 3px #4267b2;
		}

		.icons a:nth-child(2) .layer span {
			box-shadow: -1px 1px 3px #1da1f2;
		}

		.icons a:nth-child(3) .layer span {
			box-shadow: -1px 1px 3px #e1306c;
		}

		.icons a:nth-child(4) .layer span {
			box-shadow: -1px 1px 3px #2867b2;
		}

		.icons a:nth-child(5) .layer span {
			box-shadow: -1px 1px 3px #ff0000;
		}

		.icons a .text {
			position: absolute;
			left: 50%;
			bottom: -5px;
			transition: bottom 0.3s ease, opacity 0.3s ease;
			opacity: 0;
			transform: translateX(-50%);
		}

		.icons a:hover .text {
			bottom: -35px;
			opacity: 1;
		}
	</style>
</head>

<body>
	<div class="icons">
		<a href="#">
			<div class="layer">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span class="fa fa-facebook-f"></span>
			</div>
			<div class="text">Facebook</div>
		</a>
		<a href="#">
			<div class="layer">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span class="fa fa-twitter"></span>
			</div>
			<div class="text">Twitter</div>
		</a>
		<a href="#">
			<div class="layer">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span class="fa fa-instagram"></span>
			</div>
			<div class="text">Instagram</div>
		</a>
		<a href="#">
			<div class="layer">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span class="fa fa-qq"></span>
			</div>
			<div class="text">QQ</div>
		</a>
		<a href="#">
			<div class="layer">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span class="fa fa-play-circle"></span>
			</div>
			<div class="text">Play</div>
		</a>
	</div>
</body>

</html>